<template>
  <div class="jq-table h-full flex-col">
    <div class="page-card px0 h16 pt0 pb4">
      <div class="flex w-full justify-between jq-tb-btu">
        <div class="!<sm:hidden">数据列表</div>
        <TableButtons :tableButtons="tableButtons" />
      </div>
    </div>
    <el-table :data="data" @selection-change="handleSelectionChange" fit>
      <el-table-column type="selection" v-if="isSelect" fixed="left"/>
      <el-table-column show-overflow-tooltip :key="item.index" v-for="item in tableColumn" :min-width="item.minWidth || null" :prop="item.prop" :label="item.label" fit="true" show-header="true" align="left"/>
      <el-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <template :key="button.id" v-for="button in itemsButtons">
            <el-button v-if="button.label == '查看'" type="primary" text size="small" @click="button.onClick(scope.row)">{{
              button.label }}</el-button>
          </template>
          <el-popover placement="bottom" :width="150" trigger="click" v-if="!(itemsButtons.length == 1 && itemsButtons[0].label=='查看')">
            <template #reference >
              <!-- v-if="itemsButtons.length > 1" -->
              <el-button link type="primary" size="small">更多</el-button>
            </template>
            <div style="width: 90px;" class="TableBtn">
              <template :key="button.id" v-for="button in itemsButtons">
                <el-switch v-if="button.eName === 'stop'" :disabled="scope.row.orgCount != 0 || scope.row.statusText=='启用'" v-model="scope.row.statusText" active-value="启用"
                  inactive-value="停用" width="60" inline-prompt active-text="启用" inactive-text="停用" size="small"
                  @click="button.onClick(scope.row)"  />
                <el-switch v-if="button.eName === 'stop2'" v-model="scope.row.statusText" active-value="在职启用"
                  inactive-value="在职停用" width="60" inline-prompt active-text="在职启用" inactive-text="在职停用" size="small"
                  @click="button.onClick(scope.row)" />
                <el-switch v-if="button.eName === 'stop3'" v-model="scope.row.statusText" active-value="启用"
                  inactive-value="停用" width="60" inline-prompt active-text="启用" inactive-text="停用" size="small"
                  @click="button.onClick(scope.row)" />
                <el-button type="primary" text size="small"
                v-if="!button.hideConfig?.includes(scope.row.status)&&button.eName === 'pause'"
                  @click="button.onClick(scope.row, button.statusConfig)">{{ buttonsLabel(scope.row, button.statusConfig)
                  }}</el-button>
                <el-button v-if="button.eName !== 'stop' && button.eName !== 'pause' && button.label !== '查看'"
                  type="primary" text size="small" @click="button.onClick(scope.row)">{{ button.label }}</el-button>
              </template>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageable="page" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" />
    <AddOrUpdate ref="addOrUpdateRef" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import { useTable } from '@/hooks/useTable';
import { userList } from '@/api/user';

import type { IUserItem } from '@/api/user/type';
import { TableButtons } from './components';
const emits = defineEmits(['handleCurrentChange', 'handleSizeChange', 'handleSelectionChange']);

defineProps({
  tableColumn: {
    type: Array as any,
    required: true
  },
  itemsButtons: {
    type: Array as any,
    required: true
  },
  tableButtons: {
    type: Array as any,
    required: true
  },
  data: {
    type: Array as any,
    required: true
  },
  page: {
    type: Object,
    required: true
  },
  isSelect: {
    type: Boolean,
    required: true
  }

});
const addOrUpdateRef = ref();

const buttonsType = computed(() => {
  return (row: { status: number }) => {
    if (row.status === 1) {
      return 'success';
    } else if (row.status === 2) {
      return 'danger';
    } else if (row.status === 3) {
      return 'primary';
    } else {
      return '';
    }
  };
});
const buttonsLabel = computed(() => {
  return (row: { statusConfig: {}, status: number }, statusConfig: {}) => {
    return row.status===2?statusConfig[1]:statusConfig[2]
  };
});

const handleSizeChange = (value: any) => {
  emits('handleSizeChange', value);
};
const handleCurrentChange = (value: any) => {
  emits('handleCurrentChange', value);
};
/* 多选选中的数据 */
const handleSelectionChange = (val: []) => {
  // multipleSelection = val;
  emits('handleSelectionChange', val);
};
// const { tableData, page, loading, handleCurrentChange, handleSizeChange } = useTable({
//   apiFn: userList,
//   params: searchForm
// });
</script>

<style lang="scss" scoped>
.jq-table {
  .page-card {
    font-size: 15px;
    font-weight: 600;
  }
}
</style>
<style>
.TableBtn .el-button+.el-button {
  margin: 0 ;
}
</style>
